<template>
  <el-dialog
    title="新增收货地址"
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="handleClose"
  >
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="收货人:" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>

      <el-form-item label="所在地区:" required>
        <el-col :span="11">
          <el-form-item prop="province">
            <el-select v-model="ruleForm.province" placeholder="请选择">
              <el-option label="北京市" value="shanghai"></el-option>
              <el-option label="上海市" value="beijing"></el-option>
              <el-option label="河北省" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="2"> -</el-col>
        <el-col :span="11">
          <el-form-item prop="city">
            <el-select v-model="ruleForm.city" placeholder="请选择">
              <el-option label="朝阳区" value="shanghai"></el-option>
              <el-option label="海淀区" value="beijing"></el-option>
              <el-option label="昌平区" value="beijing"></el-option>
              <el-option label="通州区" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-form-item>

      <el-form-item label="详细地址:" prop="address">
        <el-input v-model="ruleForm.address"></el-input>
      </el-form-item>

      <el-form-item label="电话/手机:" prop="tel">
        <el-input v-model="ruleForm.tel"></el-input>
      </el-form-item>

      <el-form-item v-if="type == 1" label="邮箱:" prop="email">
        <el-input v-model="ruleForm.email"></el-input>
      </el-form-item>

      <el-form-item label="设置为默认:" prop="isChecked">
        <el-checkbox v-model="ruleForm.isChecked"></el-checkbox>
      </el-form-item>

      <el-form-item>
        <div class="footer">
          <el-button class="save-btn" @click="submitForm('ruleForm')"
            >保存</el-button
          >

          <el-button @click="resetForm('ruleForm')">取消</el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  name: "EditAddress",
  data() {
    return {
      type: 0, //0-收货地址 1 收票地址
      handleType: 1, //1-新增 2-编辑
      ruleForm: {
        name: "",
        province: "",
        city: "",
        address: "",
        tel: "",
        email: "",
      },
      dialogVisible: false,
      rules: {
        name: [
          { required: true, message: "请输入收货人姓名", trigger: "blur" },
        ],
        area: [{ required: true, message: "请选择所在地区", trigger: "blur" }],
        address: [
          { required: true, message: "请输入详细地址", trigger: "blur" },
        ],
        tel: [{ required: true, message: "请输入联系方式", trigger: "blur" }],
        email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
      },
    };
  },
  methods: {
    handleClose() {
      this.dialogVisible = false;
    },
    open(type, handleType, data) {
      this.type = type;
      this.handleType = handleType;
      this.dialogVisible = true;
      if (handleType == 2) {
        this.ruleForm = Object.assign(this.ruleForm, data);
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.dialogVisible = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogVisible = false;
    },
  },
  created() {},
};
</script>
<style lang="scss" scoped>
.line {
  opacity: 0;
}
.footer {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  button {
    width: 100px;
    height: 40px;
  }
  .save-btn {
    background-color: rgba(68, 42, 141, 1);
    color: #ffffff;
  }
}
</style>
